<!-- 栏目管理页面 -->


<div class="row">
    <div><button id="classify_batchdelete" class="btn btn-danger">批量删除</button></div>
    <div><button type="button" id="classify_add" class="btn btn-success" data-toggle="modal" data-target="#classifyModal">新增</button></div>
</div>

<table class="table table-hover" id="classify_table">
    <thead>
        <td><input type="checkbox"></td>
        <td>序号</td>
        <td>名称</td>
        <td>排序号</td>
        <td>父栏目</td>
        <td>描述</td>
        <td>操作</td>
    </thead>
    <tbody></tbody>
</table>
<!-- 新增修改的模态框Modal -->
<div class="modal fade" id="classifyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
            aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <div class="dialog-center">
                    <div>
                        <b>栏目名称:</b>
                        <input class="form-control" type="text" name="name">
                    </div>
                    <div>
                        父栏目:
                        <select class="form-control" name="parentId" id=""></select>
                    </div>
                    <div>
                        序号:
                        <input class="form-control" type="text" name="no">
                    </div>
                    <div>
                        栏目介绍:
                        <input class="form-control" type="text" name="description">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" id="cancel">取消</button>
                <button type="button" class="btn btn-primary" id="classify_submit">提交</button>
            </div>
        </div>
    </div>
</div>

<script>
    function getclassifyMsg() {
        $.get(baseURL + '/category/findAll', function(res) {
            // alert(res.message)
            //清空tbody
            $('#classify_table tbody').empty();
            res.data.forEach(function(item, index) {
                //item-->每个用户对象
                var newTr = $(`                    
                    <tr>
                        <td><input type="checkbox" value="${item.id}"></td>
                        <td>${index + 1}</td>
                        <td>${item.name}</td>
                        <td>${item.no}</td>
                        <td>${item.parentId}</td>
                        <td>${item.description}</td>
                        <td>
                        <button data-item='${JSON.stringify(item)}' class="btn btn-default" id="classify_update" data-toggle="modal" data-target="#classifyModal">编辑</button>
                        <button data-id="${item.id}" class="btn btn-danger" id="classify_delete">删除</button>
                        </td>
                    </tr>`);
                $('#classify_table tbody').append(newTr)
            })
        })
    }
    getclassifyMsg();

    //查询栏目下拉菜单
    function getparentId() {
        $.get(baseURL + '/category/findAll', function(res) {
            // console.log(res.data);
            //清空下拉列表
            $('select[name=parentId]').empty();
            $('select[name=parentId]').append(`<option value="">请选择父栏目</option>`)
            res.data.forEach(function(item) {
                var newOpt = $(`
              <option value="${item.id}">${item.name}</option>
              `)
                $('select[name=parentId]').append(newOpt)
            })
        })
    }
    getparentId();

    //添加功能
    $("#classify_add", ).click(function() {
        //清空user,设置模态框头部
        user = null;
        $('.modal-title').html('新增栏目信息');
        //清空表单数据
        $('input[name=name]').val('');
        $('select[name=parentId]').val('');
        $('input[name=no]').val('');
        $('input[name=description]').val('');
    });

    //修改功能事件代理 id="classify_update"
    $('#classify_table tbody').on('click', '#classify_update', function() {
        // alert()
        user = $(this).attr('data-item');
        user = JSON.parse(user);
        $('input[name=name]').val(user.name);
        $('select[name=parentId]').val(user.parentId);
        $('input[name=no]').val(user.no);
        $('input[name=description]').val(user.description);
        //设置模态框标题
        $('.modal-title').html('修改栏目信息')
    });

    //新增修改提交按钮  新增:保存数据  修改:更新数据   传id代表修改,不传id代表新增
    $("#classify_submit").click(function() { //给后加的节点绑定事件
        //获取用户输入的信息
        var name = $('input[name=name]').val();
        var parentId = $('select[name=parentId]').val();
        var no = $('input[name=no]').val();
        var description = $('input[name=description]').val();
        console.log(name, parentId, no, description);
        //访问后台接口,保存到数据库,保存成功之后刷新数据
        $.post(baseURL + '/category/saveOrUpdate', {
            id: user ? user.id : '',
            name: name,
            parentId: parentId,
            no: no,
            description: description,
        }, function(res) {
            //提示保存成功
            if (res.status == 200) {
                // alert('保存成功');
                getparentId();
                getclassifyMsg();
            }
        });
        $("#classifyModal").modal("hide")
        $('.modal-backdrop').remove(); //去掉遮罩层
    })

    //全选,全不选功能
    $('#classify_table thead :checkbox').change(function() {
        // console.log($(this).attr('checked'));
        var value = $(this).prop('checked');
        //设置表体复选框
        $('#classify_table tbody :checkbox').prop('checked', value);
    })

    //批量删除功能,首先看用户是否勾选,有则询问是否删除,没有勾选,提示用户勾选
    $('#classify_batchdelete').click(function() {
        var checks = $('#classify_table tbody *:checkbox:checked');
        // console.log(checks);
        // 获取表单元素的value值
        var ids = checks.map(function(index, item) {
            return $(item).val();
        });
        ids = ids.toArray();
        ids = ids.toString();
        console.log(ids);
        if (ids.length == 0) {
            alert('请选择要删除的数据');
            return;
        }
        if (confirm('是否确认删除')) {
            //批量删除,局部更新数据
            $.post(baseURL + '/category/batchDelete', {
                ids: ids
            }, function(res) {
                console.log(res);
                // alert(ids.toString() + '已经批量删除(后台暂无批量删除接口)');
                getparentId();
                getclassifyMsg()
            })
        };
    });

    //移除功能,事件代理 id="classify_delete"
    $('#classify_table tbody').on('click', '#classify_delete', function() {
        // console.log(this);
        //获取data-id值 attr
        //attr('name','test') prop()
        var id = $(this).attr('data-id');
        // console.log(id);
        if (confirm('确认删除?')) {
            $.get(baseURL + '/category/deleteById', {
                id: id
            }, function(res) {
                console.log(res);
                getparentId();
                getclassifyMsg()
            });
        }
    });
</script>

<style>

</style>